<template>
  <div class="drag-drop-container">
    <div class="make-preview" :style="previewContainerStyle">
      <div class="image-edit" ref="image" :style="imageContainerStyle">
        <img class="bg-image" :src="makeTemplate.backgroundUrl"
        >
        <div class="overlay">
          <div
            class="sprite"
            :key="i"
            v-for="(sprite, i) in makeTemplate.sprites"
            :style="getSpriteStyle(sprite)"
            :class="{'active': i === activeSpriteIndex, 'variable': sprite.type === 'variable'}"
            :id="'sprite_' + i"
            @mousedown="spriteMouseDown($event, i)"
          >
            <div class="text" v-if="sprite.type === 'text'" v-html="stripContent(sprite.content)"></div>
            <div class="variable" v-if="sprite.type === 'variable'" v-html="stripContent(sprite.content)"></div>
            <div class="picture" v-if="sprite.type === 'picture'">
              <img :src="sprite.imageSrc">
            </div>
            <div class="resizers" v-show="i === activeSpriteIndex && sprite.type === 'picture'">
              <div class="resizer nw" :style="retrieveScaleStyle"></div>
              <div class="resizer ne" :style="retrieveScaleStyle"></div>
              <div class="resizer sw" :style="retrieveScaleStyle"></div>
              <div class="resizer se" :style="retrieveScaleStyle"></div>
            </div>
          </div>
        </div>
        <div class="attracted-line x" v-show="attractedY > -1" :style="{transform: 'translateY(' + attractedY + 'px)'}"></div>
        <div class="attracted-line y" v-show="attractedX > -1" :style="{transform: 'translateX(' + attractedX + 'px)'}"></div>
      </div>
    </div>
  </div>
</template>

<script src="./dragDropContainer.js"></script>
<style lang="less" src="./dragDropContainer.less"></style>